<template>
  <div class="menuBar" >
    <el-row>
      <el-col :span="24" class="menuCol">
        <el-row class="menuUser">
          <el-image
              class="menuUserImage"
              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
              fit="fill"></el-image>
        </el-row>
        <el-row>
          <el-menu
              default-active="/home"
              class="el-menu-vertical-demo"
              background-color="#545c64"
              text-color="#fff"
              style="overflow: hidden"
              :router="true"
              active-text-color="#ffd04b">
            <el-menu-item index="/home">
              <template slot="title">
                <i class="el-icon-s-home"></i>
                <span>首页</span>
              </template>
            </el-menu-item>
            <el-submenu index="/user">
              <template slot="title">
                <i class="el-icon-edit"></i>
                <span>书写台</span>
              </template>
              <el-menu-item-group>
                <el-menu-item  index="/bookWrite/write">
                  <i class="el-icon-edit-outline"></i>发布文章</el-menu-item>
                <el-menu-item index="/bookWrite/article"><i class="el-icon-document"></i>我的文章</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="/user" >
              <i class="el-icon-user-solid"></i>
              <span slot="title">个人中心</span>
            </el-menu-item>
            <el-menu-item index="/author">
              <i class="el-icon-coffee-cup"></i>
              <span slot="title">关于作者</span>
            </el-menu-item>
          </el-menu>
        </el-row>
      </el-col>

    </el-row>


  </div>
</template>

<script>

export default {
  name: "MenuBar",
  inject:['reload'],

  methods:{

  }
}
</script>

<style lang="scss" scoped>
   .menuBar{
     .menuCol{
       height: 100vh;
       margin-left: 0 !important;
       background: #545C64;
       .menuUser{
         display: flex;
         justify-content: center;
         justify-items: center;
         align-items: center;
         padding: 6px;
         .menuUserImage{
           width: 200px;
           height: 100px;
         }
       }
     }
   }
   /deep/ .el-menu-item-group__title{
      margin-top: -20px;
    }
</style>